<template>
  <Row type="flex" justify="center">
    <Col span="7" class="MainLeft">
      <!-- <Anchor show-ink class="MainAnchor" :affix="false">
        <AnchorLink
          v-for="item in articleList"
          :key="'link' + item.id"
          :href="'#articleTag' + item.id"
          :title="item.title"
        />
      </Anchor> -->
    </Col>
    <Col span="10">
      <div class="MainAnchor">
        <h3>文章列表:</h3>
        <ul>
          <li v-for="item in articleList" :key="'link' + item.id">
            <a
              @click="activeTag = 'articleTag' + item.id"
              :href="'#articleTag' + item.id"
              :class="{ Active: activeTag === 'articleTag' + item.id }"
              >{{ item.title }}</a
            >
          </li>
        </ul>
      </div>
      <div class="carouse">
        <Carousel autoplay loop :height="200" @on-click="clickCarousel">
          <CarouselItem v-for="(item, index) in homeTag" :key="index">
            <div>
              <Icon :custom="item.custom" size="48" :color="item.color"></Icon>
              <h1>@{{ item.content }}</h1>
            </div>
          </CarouselItem>
        </Carousel>
      </div>
      <div class="articleTagList">
        <ArticleTag
          v-for="item in articleList"
          :title="item.title"
          :articleTypeId="item.articleTypeId"
          :createTime="item.createTime"
          :support="item.support"
          :comment="item.comment"
          :visited="item.visited"
          :abstract="item.abstract"
          :id="item.id"
          :digest="item.digest"
          :key="item.id"
        >
        </ArticleTag>
      </div>

      <div class="noArticle" v-show="!isNoArticle">
        <Icon custom="iconfont icon-zu" size="36" />
        <h3>已经没有更多了-_-||</h3>
      </div>
    </Col>
    <Col span="7">
      <Row type="flex" justify="start">
        <Col span="24">
          <div class="MainSideNav">
            <h3>分类:</h3>
            <Button
              v-for="item in articleTypeList"
              :key="'type' + item.id"
              :type="buttonType[Math.floor(Math.random() * 4)]"
              >{{ item.name }} ({{ item.articleCount }})</Button
            >
          </div>
        </Col>
      </Row>
      <Row type="flex" justify="start">
        <Col span="24">
          <div class="MainSideNav">
            <h3>标签:</h3>
            <Button
              v-for="item in tagList"
              :key="'tag' + item.id"
              :type="buttonType[Math.floor(Math.random() * 4)]"
              >{{ item.name }}({{ item.articleCount }})</Button
            >
          </div>
        </Col>
      </Row>
      <BackTop></BackTop>
    </Col>
  </Row>
</template>

<script>
import ArticleTag from '../../components/Article/ArticleTag'
import HomeTagUrl from '../../assets/js/homeTag'
import { mapState, mapMutations, mapGetters } from 'vuex'
export default {
  components: { ArticleTag },
  data() {
    return {
      articleList: [],
      getArticleListParams: {
        tag: '',
        type: '',
        'pageModel.pageIndex': 0,
        'pageModel.pageSize': 5
      },
      getTagListParams: {
        name: '',
        type: '',
        id: ''
      },
      hasData: true,
      homeTag: HomeTagUrl,
      activeTag: null,
      buttonType: ['info', 'success', 'warning', 'error']
    }
  },
  methods: {
    ...mapMutations(['ChangeHasArticle']),
    clickCarousel(index) {
      window.open(this.homeTag[index].link)
    },
    scroll() {
      var a =
        this.articleList.length /
        this.getArticleListParams['pageModel.pageSize']
      let top = document.documentElement.scrollTop
      let sHeight = document.documentElement.scrollHeight
      let cHeight = document.documentElement.clientHeight
      var articleList = document.querySelectorAll('.articleTag')
      for (const article of articleList) {
        var rect = article.getBoundingClientRect()
        if (rect.bottom > 0) {
          this.activeTag = article.id
          break
        }
      }
      if (sHeight - top - cHeight < 1 && !this.isNoArticle) {
        if (parseInt(a) < parseFloat(a)) {
          return
        }
        this.getArticleListParams['pageModel.pageIndex'] =
          this.articleList.length /
          this.getArticleListParams['pageModel.pageSize']
        this.$api.Article.GetArticleList(this.getArticleListParams).then(
          res => {
            if (res.data.length == 0) {
              this.ChangeHasArticle()
            } else {
              this.articleList.push(...res.data)
            }
          }
        )
      }
    }
  },
  computed: {
    ...mapState(['isNoArticle']),
    ...mapGetters(['tagList', 'articleTypeList'])
  },
  mounted() {},
  created() {
    window.addEventListener('scroll', this.scroll)
    this.$api.Article.GetArticleList(this.getArticleListParams).then(res => {
      this.articleList = res.data
    })
  },
  destroyed() {
    window.removeEventListener('scroll', this.scroll, false)
  }
}
</script>

<style lang="scss">
.carouse {
  position: relative;
  height: 200px;
  margin-bottom: 50px;
}
.ivu-carousel {
  background-color: #fff;
  width: 70%;
  position: absolute;
  left: 50%; /* 定位父级的50% */
  transform: translate(-50%, 0%); /*自己的50% */
  border-radius: 5px;
  opacity: $baseOpacity;
}
.ivu-carousel-item {
  > div {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  i {
    margin-right: 10px;
  }
  h1 {
    font-family: $baseFont;
    font-size: 36px;
  }
  > div:hover {
    cursor: pointer;
  }
}
.noArticle {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row;
  color: $baseColor;
  i {
    margin-right: 10px;
  }
}
.articleTagList {
  display: flex;
  justify-content: center;
  flex-flow: column;
  align-items: center;
}
.MainAnchor {
  padding: 5px;
  left: 20%;
  position: fixed;
  top: 200px;
  border-radius: $radius;
  background-color: #fff;
  opacity: $baseOpacity;
  box-shadow: 5px 5px 5px;
  width: 200px;
  ul {
    list-style: none;
  }
  li {
    margin: 5px 10px;
  }
  a {
    text-decoration: none;
    color: $deepColor;
  }
  a:hover {
    color: $baseColor;
    font-weight: bold;
  }
}
.Active {
  color: $baseColor !important;
  font-weight: bold;
}

// .MainRight {
//   display: flex;
//   justify-content: center;
// }
.MainSideNav {
  padding: 5px;
  width: 400px;
  background-color: #fff;
  border-radius: $radius;
  opacity: $baseOpacity;
  margin-bottom: 20px;
  h3 {
    margin: 5px;
  }
  // display: flex;
  // justify-content: left;
  // flex-flow: row wrap;
  // align-items: center;
  button {
    margin: 5px;
  }
}
// .MainAnchorLeft {
//   width: 1px;
//   border: 1px solid #fff;
//   overflow: none;
//   height: 120px;
//   img {
//     position: relative;
//     top: -12px;
//     left: -12px;
//     height: 24px;
//     width: 24px;
//   }
</style>
